<template>
  <div>
    <div class="song-list">
      <van-card :title="songlistInfo.dissname" :thumb="songlistInfo.logo">
        <template #desc>
          <div>
            <van-icon name="user-o" />
            {{ songlistInfo.nick }}
          </div>
          <span>标签：</span>
          <span v-for="tag in tags" :key="tag.id">
            {{ tag.name }}
          </span>
          <div>
            <span
              >播放量：{{
                parseInt(songlistInfo.visitnum / 10000) + "万"
              }}</span
            >
          </div>
          <div>
            <span
              >收藏量：{{ parseInt(songlistInfo.ctime / 100000) + "万" }}</span
            >
          </div>
          <div class="button">
            <van-button icon="play-circle-o" type="primary">播放</van-button>
            <van-button icon="like-o" type="default">收藏</van-button>
            <van-button icon="orders-o" type="default">评论</van-button>
            <van-button icon="ellipsis" type="default">更多</van-button>
          </div>
          <div class="desc">
            <h4>简介</h4>
            {{ songlistInfo.desc }}
          </div>
        </template>
      </van-card>
      <!-- 歌曲、歌手、专辑 -->
      <div class="songs-list">
        <div class="songs" v-for="song in songs" :key="song.id">
          <span>{{ song.songname }}</span>
          <span v-for="singers in singer" :key="singers.id">{{
            singers.name
          }}</span>
          <span>{{ song.albumname }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ['id'],
  data: () => ({
    songlistInfo: [],
    tags: [],
    songs: [],
    singer: []
  }),
  methods: {
    // 获取歌单详细信息
    async getSonglistInfo() {
      const res = await this.$http.getSonglistInfo(this.id)
      this.songlistInfo = res.data.data
      this.tags = res.data.data.tags
      this.songs = res.data.data.songlist
      this.songs.forEach(el => {
        this.singer.push(el.singer)
      })
      // console.log(this.songs)
    }
  },
  created() {
    this.getSonglistInfo()
  }
}
</script>
<style lang="less">
.song-list {
  width: 100%;
  .van-image__img {
    width: 100px;
    height: 100px;
  }
  .van-card__content {
    margin-left: 20px;
    font-size: 10px;
    padding-top: 5px;
    height: 120px;
  }
  .button {
    position: absolute;
    top: 110px;
    left: -110px;
    .van-button.van-button--primary.van-button--normal {
      width: 80px;
      height: 30px;
      font-size: 10px;
      margin-left: 5px;
      .van-button__content {
        width: 100%;
      }
    }
    .van-button.van-button--default.van-button--normal {
      width: 80px;
      height: 30px;
      font-size: 10px;
      margin-left: 5px;
      .van-button__content {
        width: 100%;
      }
    }
    .van-button.van-button--primary.van-button--normal:first-child {
      margin-left: 0;
    }
  }
  .desc {
    position: absolute;
    top: 150px;
    left: -120px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
  .songs-list {
    margin-top: 100px;
    font-size: 10px;
    margin-left: 10px;
    .songs {
      margin-top: 10px;
    }
  }
}
</style>
